<template>
    <div id="AuditDetail">
        <div id="header">
            <el-button @click="back">返回</el-button>
        </div>
        <!-- 头部 -->
        <div class="title">
            <span>项目详情</span>
        </div>

        <!-- 入驻详情具体内容 -->
        <div id="auditContent">
            <div class="contentItem clear">
                <div class="contentTitle">企业信息</div>
                <div class="contentList">
                    <div class="listItem clear">
                        <p>企业名称</p>
                        <!-- <p>xxxx有限公司</p> -->
                        <p>{{auditDetail.name}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>注册地址</p>
                        <!-- <p>xxx省xxxx市xx区xx路xx号</p> -->
                        <p>{{auditDetail.location}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>经纬度</p>
                        <!-- <p>1190-23893450374</p> -->
                        <p>{{auditDetail.longitude? auditDetail.longitude:'118.93873676，23.1873786'}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>企业简介</p>
                        <!-- <p>阿里巴巴(1688.com)批发网是全球企业间(B2B)电子商务的著名品牌，为天下网商提供海量商机信息和便捷安全的在线交易市场。从海量的商品中甄选热销新品、优质好商，为买家采购批发提供风向标。优质折扣货源，爆款清仓开抢，进货更省心，采购批发就上阿里巴巴！</p> -->
                        <p>{{auditDetail.des}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>客服电话</p>
                        <p>{{auditDetail.serviceNumber}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>负责人姓名</p>
                        <p>{{auditDetail.boss}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>负责人电话</p>
                        <p>{{auditDetail.bossNumber}}</p>
                    </div>

                    <div class="listItem clear">
                        <p>营业执照</p>
                        <div id="businessLicense">
                            <img :src="addressHttp+'/'+auditDetail.license" alt />
                        </div>
                    </div>

                    <div class="listItem clear">
                        <p>门头照片</p>
                        <div id="doorImg">
                            <img :src="addressHttp+'/'+auditDetail.photo" alt />
                            <!-- <img
                                src="https://img.zcool.cn/community/01e13959fc067fa801216a4b67922c.jpg@1280w_1l_2o_100sh.jpg"
                                alt
                            />-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="contentItem clear">
                <div class="contentTitle">收款信息</div>
                <div class="contentList">
                    <div class="listItem clear">
                        <p>银行开户公司名</p>
                        <p>{{auditDetail.name}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>银行开户账号</p>
                        <p>{{auditDetail.bankAccount}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>开户银行所在地</p>
                        <p>{{auditDetail.bankLocation}}</p>
                    </div>
                    <div class="listItem clear">
                        <p>开户银行</p>
                        <p>{{auditDetail.bank}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 是否同意入驻 -->
        <div id="isAgree">
            <el-button type="primary" plain @click="agreen">同意</el-button>
            <el-button type="danger" plain @click="refuse">拒绝</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: [], // 父辈向子辈传参
    name: "AuditDetail",
    components: {
        // 组件的引用
    },
    data() {
        return {
            addressHttp: "http://localhost:8088",
            auditDetail: {} /* 存放点击的入驻的企业详情 */,
            auditId: "" /* 入驻审核详情的id */,
        };
    },
    methods: {
        // 点击返回
        back() {
            this.$router.back();
        },

        // 渲染入驻审核详情
        getAuditDetail() {
            this.$axios({
                url: this.addressHttp + "/platformResident/detailsQuery",
                method: "get",
                params: {
                    id: this.auditId,
                },
            })
                .then((res) => {
                    console.log(res.data[0]);
                    if (res.code === 200) {
                        this.auditDetail = { ...res.data[0] };
                        console.log(this.auditDetail);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 点击同意
        agreen() {
            this.$confirm("确定同意该门店的入驻?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$axios({
                        url: this.addressHttp + "/platformResident/agree",
                        method: "post",
                        data: {
                            id: this.auditId,
                        },
                    })
                        .then((res) => {
                            console.log(res);

                            this.$message({
                                type: "success",
                                message: "审核成功!",
                            });
                            this.$router.push("audit");
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消审核",
                    });
                });
        },

        // 点击拒绝
        refuse() {
            this.$confirm("确定拒绝该门店的入驻?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$prompt("请输入拒绝理由", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                    })
                        .then(({ value }) => {
                            this.$axios({
                                url:
                                    this.addressHttp +
                                    "/platformResident/refuse",
                                method: "post",
                                data: {
                                    id: this.auditId,
                                    auditDesc: value,
                                },
                            })
                                .then((res) => {
                                    console.log(res);

                                    this.$message({
                                        type: "success",
                                        message: "审核成功!",
                                    });

                                    this.$router.push("audit");
                                })
                                .catch((err) => {
                                    console.log(err);
                                });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "取消输入",
                            });
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消审核",
                    });
                });
        },
    },
    computed: {},
    watch: {},
    created() {
        // console.log(this.$route.params);
        this.auditDetail = { ...this.$route.params };
        console.log(this.auditDetail);

        this.auditId = this.$route.params.id;
        console.log("项目id", this.auditId);
        this.getAuditDetail();
    },
    mounted() {},
};
</script>
    
<style scoped lang='less'>
#AuditDetail {
    position: relative;
    // 头部返回
    #header {
        margin-bottom: 20px;
        .el-button {
            width: 80px;
            height: 30px;
            font-size: 13px;
            text-align: center;
            line-height: 30px;
            line-height: 6px;
            color: #333;
        }
    }

    // 头部样式
    .title {
        width: 70px;
        height: 20px;
        padding-left: 10px;
        border-left: 4px solid #0082cc;
        font-size: 14px !important;
        font-weight: bold;
    }

    // 入驻审核企业的详细信息
    #auditContent {
        margin-top: 30px;
        padding-bottom: 60px;
        font-size: 14px;

        .contentItem {
            .contentTitle {
                color: #a9a5a5;
                float: left;
                line-height: 40px;
                margin-right: 70px;
            }

            .contentList {
                width: 80%;
                float: left;
                .listItem {
                    line-height: 40px;
                    p {
                        padding: 0;
                        margin: 0;
                        float: left;
                        box-sizing: border-box;
                        &:first-child {
                            width: 12%;
                            margin-right: 15px;
                        }
                        &:last-child {
                            float: left;
                            width: 80%;
                        }
                    }

                    #businessLicense {
                        float: left;
                        img {
                            height: 100px;
                            width: 100px;
                            margin-top: 5px;
                        }
                    }

                    #doorImg {
                        float: left;
                        img {
                            float: left;
                            height: 100px;
                            width: 100px;
                            // &:last-child {
                            //     margin-left: 15px;
                            // }
                        }
                    }

                    &:last-child {
                        margin-top: 5px;
                    }
                }
            }
            &:first-child {
                margin-bottom: 50px;
            }
        }
    }
    // 同意还是拒绝
    #isAgree {
        .el-button {
            width: 100px;
            height: 40px;
            text-align: center;
            margin-right: 10px;
        }

        position: absolute;
        bottom: 20px;
        left: calc(50% - 100px);
    }
}
</style>